<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <form class="form-horizontal" action="book/search" method="post" id="search">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">豆瓣读书</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" name="title"  placeholder="搜书名">
          </div>
          <div class="col-sm-2">
              <input type="submit" name="submit" value="搜索">
          </div>
        </div>
    </form>
    <div class="row">
        <div class="col-sm-8 col-md-8">
            <div class="row">
                <h3 class="col-sm-8 col-md-8">热门书籍</h3><a href="/book/morebooks" class="btn btn-default col-sm-2 col-md-2">更多</a>
            </div>
            
            <div class="row">
              <% for(var i = 0;i<12;i++){ %>
                
                    <div class="col-sm-5 col-md-3">
                      <div class="thumbnail">
                        <img src="<%= data[i].images.medium %>" alt="..." style="width:120px;height:160px;">
                        <div class="caption">
                          <h5 class="book-title"><%= data[i].title %></h5>
                          <p class="book-author" style="width:172px;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">作者：
                          <% var authors=data[i].author %>
                          <% for(var j = 0;j<authors.length;j++){ %>
                              <span><%= authors[j] %></span>
                          <% }  %>   
                          </p>
                          
                          <p class="text-center"><a href="/book/bookdetail?id=<%= data[i].id %>" class="btn btn-default" role="button">详情</a></p>
                        </div>
                      </div>
                    </div>
                
              <%}%>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <h3>热门标签</h3>
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                热门标签
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                  <li><a href="#">反腐</a></li>
                  <li><a href="#">反腐</a></li>
                  <li><a href="#">反腐</a></li>
              </ul>
            </div>
        </div>
    </div>
    <link rel='stylesheet' href='/booksheets/bootstrap.min.js' />
  </body>
</html>
